<template>
  <div>
    <div v-if="command.value" class="show-select">
      <div class="select-content">
        <span class="type">{{command.type | filterRadio(dropData)}}</span><span class="title">{{command.name}}</span>
      </div>
      <i class="el-icon-close" @click="clearSelect()"></i>
    </div>
    <el-dropdown :hide-on-click="false" @command="handleCommand">
      <span class="el-dropdown-link like-link">
        {{command.value?'修改':downName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu class="down-list" slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in dropData"
          :key="index"
          :command="item.value">{{item.label}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 商品分类 -->
    <el-dialog
      title="商品分类"
      width="400px"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body>
      <en-category-picker
        :show="showDetail === 'CATEGORY'"
        @changed="selectCategory"
        :api="categoryApi"
        :width="360"
        placeholder="商品分类"
        clearable />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmCategory()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 商品选择 -->
    <en-goods-dialog
      :show="dialogGoodsShow"
      :default-data="defaultGoodsDataDialog"
      :limit="1"
      @close="dialogGoodsShow = false"
      @confirm="handleGoodsDialogConfirm"/>
    <!-- 微页面选择 -->
    <en-page-dialog
      :show="dialogPageShow"
      :default-data="defaultPageDataDialog"
      @close="dialogPageShow = false"
      @confirm="handlePageDialogConfirm"/>

    <!-- 店铺选择 -->
    <el-dialog title="店铺选择" :visible.sync="showShopList" width="850px" :append-to-body="true">
      <en-table-layout
        :tableData="shopData.data"
        :height="300"
        ref="shopTable"
        highlight-current-row
        @current-change="handleSelectionChange">
        <div slot="toolbar" class="inner-toolbar">
          <div class="toolbar-search">
            <div class="searchName">
              <span>
                店铺名称:
              </span>
              <el-input class="row-input" v-model.number="shopName"></el-input>
              <el-button type="primary" @click="getShopsList(1)">搜索</el-button>
            </div>
          </div>
        </div>
        <template slot="table-columns">
          <el-table-column width="32">
            <template slot-scope="scope">
              <el-radio v-model="currentPage" :label="scope.row.shop_id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="shop_id" label="店铺ID" width="60"></el-table-column>
          <el-table-column prop="shop_name" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="shop_type" label="店铺经营类型" width="180">
            <template slot-scope="{ row }">
              <span class="type">{{row.shop_type | filterDict('shop_type')}}</span><span class="title">{{command.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shop_add" label="店铺地址"></el-table-column>
        </template>
          <el-pagination
            v-if="shopData"
            slot="pagination"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            :current-page="shopData.page_no"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="shopData.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shopData.data_total">
          </el-pagination>
        </en-table-layout>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="handleCancelShopList()">取 消</el-button> -->
        <el-button type="primary" @click="handleShopDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import mixin from '../../mixin';
  import {getAdminShops} from '../../../src/api/shop.js';
  import { getDictData, filterShowDict } from '@/common/filter-show';

  export default {
    name: 'EnUrlPicker',
    mixins: [mixin],
    props: {
      downName: {
        type: String,
        default: '选择跳转页面'
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        command: {
          type: undefined,
          name: undefined,
          value: undefined
        },
        dropData: [
          {
            value: 'APPLY',
            label: '招募'
          },
          {
            value: 'APPLYDETAIL',
            label: '分销员'
          },
          {
            value: 'GOODS',
            label: '商品'
          },
          {
            value: 'SHOPS',
            label: '店铺'
          },
          {
            value: 'FIND',
            label: '发现页'
          },
          {
            value: 'CATEGORY',
            label: '分类'
          },
          {
            value: 'OWNPAGE',
            label: '微页面'
          },
          {
            value: 'SECKILL',
            label: '限时秒杀'
          },
          {
            value: 'RECOMMEND',
            label: '推荐有奖'
          },
          {
            value: 'LUCKYDRAW',
            label: '幸运抽奖'
          },
          {
            value: 'LIVE',
            label: '直播间'
          }
        ],
        dialogVisible: false,
        showDetail: undefined,
        categoryApi: 'admin/goods/categories/@id/children',
        formValue: {
          category: {}
        },
        shopName: '',
        currentPage: undefined,
        shopData: [],
        params: {
          page_no: 1,
          page_size: 20
        },
        chooseShopData: {},
        showShopList: false,
        dialogGoodsShow: false,
        defaultGoodsDataDialog: [],
        dialogPageShow: false,
        defaultPageDataDialog: ''
      }
    },
    filters: {
      // 字典显示转换
      filterDict (_stateVal, _dictType) {
        return filterShowDict(_dictType, _stateVal);
      }
    },
    mounted() {
      getDictData('shop_type');
      let _showData = JSON.parse(JSON.stringify(this.defaultData));
      this.command = _showData;
      this.getShopsList()
    },
    methods: {
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {清楚选中值}
      */
      clearSelect() {
        this.command = {
          type: undefined,
          name: undefined,
          value: undefined
        };
        this.$emit('confirm', {});
      },
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {链接类型选择}
      */
      handleCommand(command) {
        this.showDetail = command;
        this.command.type = command;
        let _optVal = {}
        switch (command) {
          case 'APPLY':
            _optVal = {
              type: 'APPLY',
              name: '招募页面',
              value: '招募页面'
            };
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
          case 'APPLYDETAIL':
            _optVal = {
              type: 'APPLYDETAIL',
              name: '分销员',
              value: '分销员'
            }
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
          case 'GOODS':
            this.dialogGoodsShow = true;
            break;
          case 'SHOPS':
            this.showShopList = true;
            break;
          case 'FIND':
            _optVal = {
              type: 'FIND',
              name: '发现页',
              value: '发现页'
            }
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
          case 'CATEGORY':
            this.dialogVisible = true;
            break;
          case 'OWNPAGE':
            this.dialogPageShow = true;
            break;
          case 'SECKILL':
            _optVal = {
              type: 'SECKILL',
              name: '限时秒杀',
              value: '限时秒杀列表'
            };
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
          case 'RECOMMEND':
            _optVal = {
              type: 'RECOMMEND',
              name: '推荐有奖',
              value: '推荐有奖'
            };
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
          case 'LUCKYDRAW':
            _optVal = {
              type: 'LUCKYDRAW',
              name: '幸运抽奖',
              value: '幸运抽奖'
            };
            this.command = _optVal;
            this.$emit('confirm', _optVal);  
            break;
          case 'LIVE':
            _optVal = {
              type: 'LIVE',
              name: '直播间',
              value: '直播间'
            };
            this.command = _optVal;
            this.$emit('confirm', _optVal);
            break;
        };
      },
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {分类选中}
      */
      selectCategory(category) {
        this.formValue.category = category ? category : {};
      },
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {分类提交}
      */
      handleConfirmCategory() {
        let _opt = {};
        let { category_id, name } = this.formValue.category;
        if (!category_id && category_id !== 0) {
          this.$message.error('请选择商品分类');
          return
        }
        _opt = {
          type: 'CATEGORY',
          name: name,
          value: category_id
        }
        this.command = _opt;
        this.$emit('confirm', _opt);
        this.dialogVisible = false;
      },
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {商品选中提交}
      */
      handleGoodsDialogConfirm(goods) {
        const goodsItem = goods[0];
        let _opt = {
          type: 'GOODS',
          name: goodsItem.goods_name,
          value: goodsItem.goods_id
        }
        this.command = _opt;
        this.$emit('confirm', _opt);
      },
      /*
        * @date 2020-01-20
        * @author wolfMan
        * @description {微页面选中提交}
      */
      handlePageDialogConfirm(page) {
        let _opt = {
          type: 'OWNPAGE',
          name: page.page_name,
          value: page.page_id
        }
        this.command = _opt;
        this.$emit('confirm', _opt);
      },
      /*
        * @description {店铺选中提交}
      */
      handleShopDialogConfirm() {
        let shop = this.chooseShopData
        let _opt = {
          type: 'SHOPS',
          name: shop.shop_name,
          value: shop.shop_id
        }
        this.command = _opt;
        this.$emit('confirm', _opt);
        this.showShopList = false
      },
      /**
        * @description { 获取店铺列表 }
      */
      getShopsList(searchParam) {
        if (searchParam) {
          this.params.shop_name = this.shopName
        }
        // this.params.local_micro_page = 3
        getAdminShops(this.params)
          .then(response => {
            this.shopData = response;
          })
      },
      /**
        * @description { 多选 }
      */
      handleSelectionChange(data) {
        if (data) {
          this.chooseShopData = data
          console.log('chooseShopData', data)
        }
      },
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.getShopsList()
      },
      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.getShopsList()
      }
    },
    watch: {
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.command = _showData;
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
.show-select {
  display: inline-block;
  position: relative;
  padding: 5px 18px 5px 5px;
  line-height: 12px;
  width: 145px;
  border: solid 1px #3870EA;
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
  overflow: hidden;
  color: #2F68F1;
  background: rgba(56, 112, 234, .2);
  font-size: 12px;
  .select-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .title {
      margin-left: 5px;
      padding-left: 5px;
      border-left: solid 1px #999;
    }
  }
  .el-icon-close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 6px;
    right: 5px;
    width: 10px;
    height: 10px;
    line-height: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
  }
}
.el-dropdown {
  cursor: pointer;
  .el-dropdown-link {
    color: #3870EA;
    font-size: 12px;
  }
  .el-icon-arrow-down {
    margin-left: 2px;
  }
}
.down-list {
  min-width: 88px;
}
.toolbar-search {
  width: 100%;
  .searchName {
    display: flex;
    flex-flow: row nowrap;
    line-height: 32px;
    /deep/ .el-input {
      width: auto!important;
      margin: 0 5px;
    }
  }
}
</style>
